<template>
  <div>
    <el-form ref="dataForm" :model="form" class="el-dialog__body" label-width="100px">
      <div class="ledgerTitle">项目信息</div>
      <el-form-item label-width="100px" label="项目名称:" prop="projectName">
        {{form.projectName}}
      </el-form-item>
      <div class="ledgerTitle">金额信息</div>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="100px" label="送审金额 (元)">
            {{form.submissionAmount}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="100px" label="核增金额 (元)">
            {{form.increaseAmount}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="100px" label="核减金额 (元)">
            {{form.deductedAmount}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="100px" label="审定金额 (元)">
            {{form.verifiedAmount}}
          </el-form-item>
        </el-col>
      </el-row>
      <div class="ledgerTitle">审核说明</div>
      <el-row>
        <el-col>
          <el-form-item label-width="100px" label="附件：">
            <el-upload
              class="upload-demo"
              action="/admin/sys-file/upload"
              :file-list="fileList"
              :on-preview="handlePreview"
              :show-file-list="true">
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="ledgerTitle">审核对比分析表终稿</div>
      <el-row>
        <el-col>
          <el-table
            ref="table"
            :data="tableData"
            :model="tableData"
            style="width: 70%;margin: auto"
            max-height="550"
            highlight-current-row
          >
            <el-table-column label="序号" width="50">
              <template #default="{ $index }">
                <span>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名称" width="250">
              <template #default="{ row }">
                <pre class="pre-style">{{ row.name }}</pre>
              </template>
            </el-table-column>
            <el-table-column label="是否对比表">
              <template #default="{ row }">
                <template>
                  {{row.compare | yesOrNo}}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="附件" width="280">
              <template #default="{ row, $index }">
                <el-upload
                  class="upload-demo"
                  action="/admin/sys-file/upload"
                  :headers="{Authorization}"
                  :on-preview="handlePreview"
                  :show-file-list="true"
                  :file-list="row.fileList">
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
               <el-button type="text" size="small" @click="amountComparison(row)" v-if="row.compare === 1">对比</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog top="5vh" title="工程结算审核对比表" :visible.sync="comparisonBox" :close-on-click-modal="!comparisonBox"
               :append-to-body="true" :before-close="closeComparisonBox" width="1400px">
      <el-table
        :data="comparisonTable"
        style="width: 100%">
        <el-table-column prop="number" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="code" label="编码" width="100">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="220">
        </el-table-column>
        <el-table-column prop="projectCharacteristics" label="项目特征" width="150">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="50">
        </el-table-column>
        <el-table-column label="初稿审定">
          <el-table-column prop="engineeringQuantity" label="工程量" width="60">
            <template slot-scope="scope">
              <span :style="{ color: getEngineeringQuantityColor(scope.row) }">{{ scope.row.engineeringQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价(元)" width="70">
            <template slot-scope="scope">
              <span :style="{ color: getPriceColor(scope.row) }">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" label="合价（元）" width="90">
            <template slot-scope="scope">
              <span :style="{ color: getTotalPriceColor(scope.row) }">{{ scope.row.totalPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="其中（元）">
            <el-table-column prop="laborCost" label="人工费" width="80">
              <template slot-scope="scope">
                <span :style="{ color: getLaborCostColor(scope.row) }">{{ scope.row.laborCost }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="machineryCost" label="机械费" width="80">
              <template slot-scope="scope">
                <span :style="{ color: getMachineryCostColor(scope.row) }">{{ scope.row.machineryCost }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="终稿审定">
          <el-table-column prop="engineeringQuantity1" label="工程量" width="60">
            <template slot-scope="scope">
              <span :style="{ color: getEngineeringQuantityColor(scope.row) }">{{ scope.row.engineeringQuantity1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price1" label="单价（元）" width="70">
            <template slot-scope="scope">
              <span :style="{ color: getPriceColor(scope.row) }">{{ scope.row.price1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice1" label="合价（元）" width="90">
            <template slot-scope="scope">
              <span :style="{ color: getTotalPriceColor(scope.row) }">{{ scope.row.totalPrice1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="其中（元）">
            <el-table-column prop="laborCost1" label="人工费" width="80">
              <template slot-scope="scope">
                <span :style="{ color: getLaborCostColor(scope.row) }">{{ scope.row.laborCost1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="machineryCost1" label="机械费" width="80">
              <template slot-scope="scope">
                <span :style="{ color: getMachineryCostColor(scope.row) }">{{ scope.row.machineryCost1 }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="80">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeComparisonBox" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import {getReport} from "@/api/adis/report/reportFinal";
import {mapGetters} from "vuex";
import {getComparison} from "@/api/adis/engineering/comparison";

export default {
  name: 'AuditEngineeringReportFinalView',
  props: {
    id: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
    },
  },
  components: {},
  dictTypes: ['audit_type'],
  computed:{
    ...mapGetters(["permissions"])
  },
  created() {
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  data() {
    return {
      isView:false,
      isAdvice:true,
      isReport:false,
      adviceForm:{
        auditStatus:'',
        createDate : `${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日`
      },
      form: {},
      tableData:[],
      comparisonTable:[],
      formDisplay:false,
      auditView: 'ReportAuditTypeAuditView1',
      fileList:[],
      Authorization:'',
      comparisonBox:false,
    }
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          getReport(this.id).then((res)=>{
            if (res.data.data !== null){
              this.handleFinalResponse(res.data.data)
              this.$emit('data-loaded', true);
            } else {
              this.$emit('data-loaded', false);
            }
          }).catch(() => {
            this.$emit('data-loaded', false);
          })
        }
      },deep: true, immediate: true
    },
    params: {
      handler(val) {
        if (val) {
          this.handleFinalResponse(val)
        }
      },deep: true, immediate: true
    },
  },
  methods: {
    handleFinalResponse(val) {
      this.form = val;
      this.fileList = this.form.attachments;
      this.fileList.forEach((item) =>{
        item.name = item.fileName;
        item.url = item.fileUrl;
      })
      this.tableData = this.form.projectReportAttachments || []
      this.tableData.forEach(item => {
        item.fileList = []
        item.attachments.forEach(col => {
          item.fileList.push({name: col.fileName, url: col.fileUrl})
        })
      })
    },
    openWord() {
      if(!this.form.wordFile) {
        this.$message({
          type: "warning",
          message: "该项尚未上传相关文书!"
        });
        return;
      }
      // this.$router.push({path:'/webOffice', query: {url: this.form.wordFile}})
      const { href } = this.$router.resolve({
        path: '/webOffice',
        query: {
          url: this.form.wordFile,
          type: this.isAudit ? 'edit' : 'view',
        }
      });
      window.open(href, '_blank');
    },
    handlePreview(file) {
      const a = document.createElement('a');
      let url = file.url ? file.url : file.response.data.url;
      let fileName = file.name;
      a.setAttribute('download', fileName);
      a.setAttribute('href', url);
      a.click();
    },
    amountComparison(row){
      this.comparisonBox = true;
      console.log(row);
      getComparison(row).then(res =>{
        this.comparisonTable = res.data.data;
        console.log(res.data.data);
      })
    },
    closeComparisonBox(){
      this.comparisonTable = [];
      this.comparisonBox = false;
      this.onLoad(this.page);
    },
    getEngineeringQuantityColor(row){
      // 根据你的条件判断值并返回相应的颜色
      if (row.engineeringQuantity !== row.engineeringQuantity1) {
        return 'red'; // 大于1000设置为红色
      }
    },
    getPriceColor(row){
      // 根据你的条件判断值并返回相应的颜色
      if (row.price !== row.price1) {
        return 'red'; // 大于1000设置为红色
      }
    },
    getTotalPriceColor(row){
      // 根据你的条件判断值并返回相应的颜色
      if (row.totalPrice !== row.totalPrice1) {
        return 'red'; // 大于1000设置为红色
      }
    },
    getLaborCostColor(row){
      // 根据你的条件判断值并返回相应的颜色
      if (row.laborCost && row.laborCost !== row.laborCost1) {
        return 'red'; // 大于1000设置为红色
      }
    },
    getMachineryCostColor(row){
      // 根据你的条件判断值并返回相应的颜色
      if (row.machinery && row.machinery !== row.machinery1) {
        return 'red'; // 大于1000设置为红色
      }
    },
  }
}
</script>

